<template>
  <div class="market_gameticket_grant">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item"><span class="search-label">主题：</span><Input placeholder="请输入" @on-keyup='filterSpace' v-model='searchTheme'></Input></Col>
          <Col class="search-item">
            <span class="search-label">游戏券类型：</span>
            <Select v-model="gameType" style="width:180px">
              <Option v-for="item in gameTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">圈定人群：</span>
            <Select v-model="selectedType" style="width:180px">
              <Option v-for="item in selectedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  >查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                 >重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item"><Button class="search-btn" type="primary" @click="skipAdd" v-if="hasPermission('moms:market:createprovide')">添加</Button></Col>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="action">
        <i class="iconsys icondetail" title="查看详情" @click='skipDetail(row, index)'></i>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="total"
              :page-size='pageSize'
              :current='pageIndex'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'market_gameticket_grant',
  data () {
    return {
      searchTheme: '',
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      gameType: '-1',
      gameTypeList: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: '1',
          label: '次卡'
        },
        {
          value: '2',
          label: '券包'
        }
      ],
      selectedType: '-1',
      selectedList: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: '1',
          label: 'V0-V9'
        }
      ],
      columns: [
        {
          title: '编号',
          key: 'code',
          width: 130,
          fixed: 'left'
        },
        {
          title: '主题',
          key: 'theme',
          minWidth: 150
        },
        {
          title: '游戏券类型',
          key: 'type',
          width: 100
        },
        {
          title: '名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '门店',
          key: 'shop',
          minWidth: 150
        },
        {
          title: '圈定人群',
          key: 'select',
          minWidth: 150
        },
        {
          title: '每人发放数量(份)',
          key: 'grant',
          width: 130
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: 150
        },
        {
          title: '修改时间',
          key: 'updateTime',
          width: 150
        },
        {
          title: '操作人',
          key: 'remark',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 80
        }
      ],
      data: [
        {
          code: 'QZ20190404001',
          theme: '五一活动',
          type: '券包',
          name: '儿童乐园',
          shop: 'A门店',
          select: '全部会员',
          grant: '6',
          price: '100',
          updateTime: '2019-01-25 00:00:00',
          createTime: '2019-01-25 00:00:00',
          opertor: '张三',
          remark: '备注备注备注备注备注'
        }
      ]
    }
  },
  methods: {
    filterSpace (e) {
      e.target.value = e.target.value.replace(/\s+/g, '')
      this.searchTheme = e.target.value
    },
    skipAdd () {
      this.$router.push({ name: 'market_gameticket_grant_create' })
    },
    skipDetail (row) {
      this.$router.push({ name: 'market_gameticket_grant_detail' })
    },
    sureDel (row) {},
    cancel (row) {},
    changePageIndex () {},
    changePageSize () {}
  }
}
</script>

<style>

</style>
